React.js服务器渲染实例(React server side rendering example)

零基础学了快两个月的React了(React-native + React.js)，所谓的000基础是指完全不懂JS，CSS，HTML5还有任何相关概念Dom，Server rendering等等。
PS：这里说服务器渲染，是误打误撞了，我刚只是想把Jade Template换掉而已。

本来我一个移动端的，和React.js是不沾边的，但是我学的时候React-native(0.25)教程里有句“我们认为你有Reactjs的相关经验，如果没有，可以学一下”，原文如下：

"We assume you have experience writing applications with React. If not, you can learn about it on the React website."

技多不加深嘛，既然大神都说了，正好有阿里云可以练手, 开搞！！！

改版前：

Express框架，使用的默认模版引擎Jade(新版改名为Pug)。由express-jsx负责将.jsx翻译成对应的.js文件，以便能在jade引用

问题一：名字我已经起不出来了，每一个页面即有.jade和.jsx, 自己写的都容易看晕

./views/<layout.jade>

doctype html
html
  head
    title=title
    link(rel='stylesheet', href='/css/style.css')
    link(rel='stylesheet', href='/css/bootstrap.min.css')
    block head
  body
    script(src='/js/react.min.js')
    script(src='/js/react-dom.min.js')
    block content
    script(src='/js/jquery.min.js')
    script(src='/js/bootstrap.min.js')
    

./views/<index.jade>

extends layout

block content
    <div id='content'></div>
    script(src='index.js')
    script.
        'use strict';
        var result = !{param};
        ReactDOM.render(React.createElement(Index, { name: result }), content);

./views/<index.jsx>

var Index = React.createClass({
  getInitialState: function () {
    return { count: 0 };
  },
  handleClick: function () {
    this.setState({
      count: this.state.count + 1,
    });
  },
  render: function () {
    return (
      <button onClick={this.handleClick}>
        Click {this.props.name.name}! Number of clicks: {this.state.count}
      </button>
    );
  }
});

问题二：需要把变量转为json，然后传给jade，再由jade传给react.js

./routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  var jsonStr = JSON.stringify({'name': 'here'}, {indent: true});
  res.render('index', { param: jsonStr });
});

module.exports = router;

问题三: react-native支持es6, 但express默认es5，更何况浏览器支持相当差, 同一个项目用量终于发现写特别闹腾，能不能讲react.js项目语法升级下呢？

问题四：加载速度，这也恰恰是服务器渲染能解决的，不过另一个好处SEO，这个我目前到不在意。

---

改版后：

Express框架，使用模版引擎express-react-views。由webpack负责将.jsx翻译成对应的.js文件(webpack顺带解决了es6语法问题)。

写不动了，感兴趣直接看代码吧：